<template>
  <div class="component-container" v-if="show">
    <div class="title">邀请成员</div>
    <div class="content" ref="content">
      {{ userData.username }}邀请你加入课堂<br />
      复制课程号，打开智绘系统并输入即可进入<br /><br />
      课程名称：{{ roomData.roomName }}<br />
      课程号：{{ roomData.roomId }}<br /><br />
      <u style="color:#037a98;cursor: pointer;" @click="showScan()">扫码入课</u>
    </div>
    <div class="button-container">
      <img class="exit-button" src="../../assets/path.png" alt="退出" @click="handleExit()" />
    </div>
  </div>
  <navByQRcode ref="navQRcode"></navByQRcode>
</template>

<script setup>
import navByQRcode from './../navByQRcode.vue'
import store from "@/store";
import { ref } from "vue";

const show = ref(false);
const userData = store.state.userData;
const roomData = store.state.roomData;
const navQRcode = ref(null)

function handleExit() {
  show.value = !show.value;
}

//将邀请内容复制到剪切板
const content =
  userData.username + "邀请你加入课堂\n" +
  "复制课程号，打开智绘系统并输入即可进入\n\n" +
  "课程名称：" + roomData.roomName + "\n" +
  "课程号：" + roomData.roomId + "\n";
async function copyContent() {
  try {
    await navigator.clipboard.writeText(content);
  } catch (err) {
    // 如果浏览器不支持或用户拒绝了剪贴板权限
    console.error("无法复制文本到剪贴板：", err);
  }
}

function showScan() {
  navQRcode.value.popOut();
}

defineExpose({
  handleExit,
  copyContent,
});
</script>

<style scoped>
.component-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 20rem;
  width: 30rem;
  border-radius: 20px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 4px 6px gray;
  z-index: 9999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
  /* margin-bottom: 10px; */
}

.button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.exit-button {
  cursor: pointer;
  /* 设置图片的宽度和高度，或根据实际需求调整 */
  width: 30px;
  height: 30px;
}

img {
  position: absolute;
  top: 2rem;
  right: 2rem;
}
</style>